@import '../../assets/styles/px2rem.scss';

.page_classify {
  height: 100%;
  background: #ffffff;
  .c-hd {
    width: 100%;
    height: px2rem(56);
    background: #1dabc5;
    box-sizing: border-box;
    z-index: 10;
    display: flex;
    justify-content: space-between;

    .m-pagenav{
      display: flex;
      margin-right: px2rem(120);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      .itm{
          margin: px2rem(19) px2rem(18) 0 px2rem(18);
          font-size: 18px;
          color: #fff;
          font-weight: 800;
      }
      .itmm{
          b{
              display: inline-block;
              height: 28px;
              margin: 14px 0 0;
              border-left: 1px solid #61c4d7;
              font-size: 0;
          }
      }
      .itms{
          margin: px2rem(19) px2rem(18) 0 px2rem(18);
          font-size: 18px;
          color: #fff;
          font-weight: 800;
      }
    }

    .act{
      display: flex;
      height: px2rem(56);
      width: px2rem(108);
      background-color:#1dabc5;
      position: relative;
      .m-login{
          // float: left;
          font-size: 22px;
          padding: 0 px2rem(15);
          line-height: px2rem(56);
          // border-right: 1px solid #ccc;
          color: #fff;
      }
      span{
          display: block;
          height: px2rem(46);
          position: absolute;
          top: px2rem(12);
          right: px2rem(50);
          color: #61c4d7;
          font-weight: 100;
          font-size: 22px;
      }
      .m-search{
          // float: right;
          font-size: 22px;
          padding: 0 px2rem(15);
          line-height: px2rem(56);
          color: #fff;
      }
    }
  }

  .c-bd {
    padding: 0 0 px2rem(20);
    .am-list {
      .am-list-body {
        a {
          display: block;
          padding: px2rem(10);
          border-bottom: 1px solid #bcbcbc;
          .am-list-item {
            padding-left: 0;

            .am-list-line {
              align-items: flex-start;
              .am-list-content {
                display: flex;
                position: relative;
                .img{
                  width: px2rem(100);
                  height: px2rem(70);
                  line-height: px2rem(70);
                  border-radius: px2rem(6);
                  img{
                    width: px2rem(100);
                    height: px2rem(70);
                  }
                  span {
                    font-size: 30px;
                    color: #fff;
                    position: absolute;
                    top: px2rem(4);
                    left: px2rem(10);
                  }
                }

                .info {
                  margin-left: px2rem(10);
                  width: px2rem(230);
                  h3 {
                    font-size: 16px;
                    line-height: 30px;
                  }
                  p{
                    height: px2rem(36);
                    overflow: hidden;
                    font-size: 14px;
                    line-height: px2rem(18);
                    color: #666;
                    em {
                      font-weight: 400;
                      margin: 0 px2rem(5);
                    }
                  }
                }
              }
              .am-list-arrow {
                margin-top: px2rem(28);
                margin-right: px2rem(5);
              }
            }

            .am-list-line-multiple {
              padding: 0;
            }
          }
        }
      }
    }
  }

  .g-ft {
    padding: 0 px2rem(10) px2rem(20);
    .m-cprt {
      color: #999;
      line-height: 2em;
      text-align: center;
      a {
        color: #999;
        outline: none;
        cursor: pointer;
      }
    }
  }
}

.m-nav{
  width: 100%;
  height: px2rem(235);
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  .m-nav-top{
      display: flex;
      // justify-content: space-around;
      width: 100%;
      height: px2rem(95);
      padding-top: px2rem(30);
      li{
          width: 25%;
          .box{
              border-radius: px2rem(10);
              padding: px2rem(11) 0 0;
              margin: 0 auto;
              display: block;
              width: px2rem(56);
              height: px2rem(45);
              text-decoration: none;
              background-color: #61c4d7;
              i{
                  font-size: px2rem(30);
                  padding: px2rem(14) px2rem(14) px2rem(14) px2rem(14);
                  color: #fff;
              }
              
          }
          span{
              padding-top:px2rem(5);
              display: block;
              font-size: px2rem(16);
              color: #666;
              text-align: center;
          }
      }
  }
  .m-nav-bottom{
      display: flex;
      width: 100%;
      height: px2rem(95);
      // padding-bottom: px2rem(30);
      li{
          width: 25%;
          .box{
              border-radius: px2rem(10);
              padding: px2rem(11) 0 0;
              margin: 0 auto;
              display: block;
              width: px2rem(56);
              height: px2rem(45);
              text-decoration: none;
              background-color: #61c4d7;
              i{
                  font-size: px2rem(30);
                  // padding: px2rem(12);
                  padding: px2rem(14) px2rem(20) px2rem(14) px2rem(13);
                  color: #fff;
              }
              
          }
          span{
              padding-top:px2rem(5);
              display: block;
              font-size: px2rem(16);
              color: #666;
              text-align: center;
          }
      }
  }
}

.am-modal-wrap {
  .am-modal-popup {
    top: px2rem(56);
  }
}
